<template>
  <div>
    <a-form :form="form" layout="inline">
      <table id="table-1" style="margin-bottom: 70px">
        <tr>
          <td class="title">是否参与考评</td>
          <td colspan="3">
            <a-radio-group
              name="radioGroup1"
              v-model="params.fsfcykp"
              :readonly="disabled"
            >
              <a-radio value="否"> 否 </a-radio>
              <a-radio value="是"> 是 </a-radio>
            </a-radio-group>
          </td>
        </tr>

        <tr>
          <td class="title">姓名</td>
          <td class="cnetent">
            <a-input
            class="input"
              :readonly="disabled"
              v-model="params.fusermc"
              placeholder="请输入姓名"
            ></a-input>
          </td>
          <td class="title">工作单位</td>
          <td colspan="4" class="cnetent">
            <a-input
            class="input"
              :readonly="disabled"
              v-model="params.fgzdw"
              placeholder="请输入工作单位"
            ></a-input>
          </td>
        </tr>

        <tr>
          <td class="title">审评员身份</td>
          <td>
            <a-radio-group name="radioGroup2" :readonly="disabled">
              <a-radio value="组长"> 组长 </a-radio>
              <a-radio value="审评员"> 审评员 </a-radio>
              <a-radio value="预备审评员"> 预备审评员 </a-radio>
            </a-radio-group>
          </td>
          <td class="title">考核年度</td>
          <td class="cnetent">
            <a-input
            class="input"
              :readonly="disabled"
              v-model="params.fyear"
              placeholder="请输入考核年度"
            ></a-input>
          </td>
        </tr>

        <tr>
          <td class="title">廉洁自律情况</td>
          <td colspan="3">
            <a-radio-group
              name="radioGroup3"
              v-model="params.fljzlqk"
              :readonly="disabled"
            >
              <a-radio value="符合"> 符合 </a-radio>
              <a-radio value="不符合"> 不参与考评 </a-radio>
              <a-radio value="预备审评员"> 预备审评员 </a-radio>
            </a-radio-group>
          </td>
        </tr>

        <tr>
          <td class="title" rowspan="4">参加审评情况</td>
        </tr>
        <tr>
          <td class="title" style="text-align: right !important">
            中心选派次数
          </td>
          <td class="cnetent">
            <a-input
            class="input"
              type="number"
              v-model="params.fzxxpcs"
              :readonly="disabled"
            ></a-input>
          </td>
          <td rowspan="3" style="text-align: center !important">
            <a-radio-group
              name="radioGroup4"
              v-model="params.fcjjcqk"
              :options="comprehensiveCheck"
              :readonly="disabled"
            >
            </a-radio-group>
          </td>
        </tr>
        <tr>
          <td class="title" style="text-align: right !important">
            实际审评次数
          </td>

          <td class="cnetent">
            <a-input
            class="input"
              type="number"
              v-model="params.fsjjccs"
              :readonly="disabled"
            ></a-input>
          </td>
        </tr>
        <tr>
          <td class="title" style="text-align: right !important">出勒率%</td>
          <td class="cnetent">
            <a-input
            class="input"
              type="number"
              v-model="params.fcql"
              :readonly="disabled"
            ></a-input>
          </td>
        </tr>
        <tr>
          <td class="title">参加继续教育情况</td>
          <td colspan="3">
            <a-radio-group
              :readonly="disabled"
              name="radioGroup5"
              :options="comprehensiveCheck"
              v-model="params.fcjjxjyqk"
            >
            </a-radio-group>
          </td>
        </tr>
        <tr>
          <td class="title">日常业务能力考核情况</td>
          <td colspan="3">
            <a-radio-group
              :readonly="disabled"
              name="radioGroup6"
              :options="comprehensiveCheck"
              v-model="params.frcywnlkhqk"
            >
            </a-radio-group>
          </td>
        </tr>
        <tr>
          <td class="title">个人年度总结情况</td>
          <td colspan="3">
            <a-radio-group
              :readonly="disabled"
              name="radioGroup7"
              :options="comprehensiveCheck"
              v-model="params.fgrndzjqk"
            >
            </a-radio-group>
          </td>
        </tr>
        <tr>
          <td class="title">年度综合考评结果</td>
          <td colspan="3">
            <a-radio-group
              :readonly="disabled"
              name="radioGroup7"
              :options="comprehensiveCheck"
              v-model="params.fndzhkpjg"
            >
            </a-radio-group>
          </td>
        </tr>
        <tr>
          <td class="title">备注</td>
          <td colspan="3" class="cnetent">
            <a-input
            class="input"
              placeholder="请填写备注"
              v-model="params.fbz"
              :readonly="disabled"
            ></a-input>
          </td>
        </tr>
        <tr>
          <td class="title">
            <span style="color: red; margin-right: 5px">*</span>退回意见
          </td>
          <td colspan="3" class="cnetent">
            <a-form-item
              ><a-input
              class="input"
                :disabled="disabled"
                placeholder="请填写退回意见"
                v-model="fthyj"
                v-decorator="[
                  `fthyj`,
                  { rules: [{ required: true, message: '请选择退回意见' }] },
                  ,
                ]"
                @focus="optionFocus('fthyj')"
              ></a-input
            ></a-form-item>
          </td>
        </tr>
        <tr>
          <td class="title">
            <span style="color: red; margin-right: 5px">*</span>办理意见
          </td>
          <td colspan="3" class="cnetent">
            <a-form-item
              ><a-input
              class="input"
                :disabled="disabled"
                placeholder="请填写办理意见"
                v-model="opinion"
                v-decorator="[
                  `opinion`,
                  { rules: [{ required: true, message: '请选择办理意见' }] },
                  ,
                ]"
                @focus="optionFocus('opinion')"
              ></a-input
            ></a-form-item>
          </td>
        </tr>
        <tr style="border: 0 !important" v-if="!disabled">
          <td style="border: 0 !important" colspan="4">
            <div style="display: flex; justify-content: space-between">
              <div>
                <a-form-item label="待办人">
                  <a-radio-group
                    name="radioGroup7"
                    v-model="dbrid"
                    v-decorator="[
                      `dbrid`,
                      { rules: [{ required: true, message: '请选择待办人' }] },
                      ,
                    ]"
                  >
                    <a-radio
                      v-for="next in nextNodeDbrList"
                      :value="next.dbrid"
                      :key="next.dbrid"
                    >
                      {{ next.dbr }}</a-radio
                    >
                  </a-radio-group>
                </a-form-item>
              </div>
              <div>
                <a-form-item label="短信通知">
                  <a-checkbox v-model="smg"></a-checkbox>
                  下一环节:{{ nextNode }}
                </a-form-item>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </a-form>

    <vxe-modal
      v-model="modal"
      width="65vw"
      height="65vh"
      :destroy-on-close="true"
    >
      <opinion type="年度考评办理意见" @change="optionInput"></opinion>
    </vxe-modal>
  </div>
</template>

<script>
import { comprehensiveCheck } from "../../common/GroupConfig";
import opinion from "@/views/everydayCheck/components/opinion";
export default {
  name: "flow-check-table",
  components: { opinion },
  props: {
    params: {
      type: Object,
      default() {
        return {};
      },
    },
    change: { type: Function },
    beforeCreate: {
      type: Function,
    },
    nextNode: {
      type: String,
      default: "",
    },
    nextNodeDbrList: {
      type: Array,
      default() {
        return [];
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkValue: {},
      cyxpjlList: [],
      form: this.$form.createForm(this, { name: "coordinated" }),
      timeout: null,
      comprehensiveCheck,
      modal: false,
      dbrid: "", //	下环节待办人
      smgflag: "是",
      smg: true,
      opinion: "", //意见
      nextNodeDbr: [],
      // 退回意见
      fthyj: "",
      focusPrototype: "",
    };
  },
  watch: {
    smg: {
      immediate: true,
      handler() {
        this.smgflag = this.smg ? "是" : "否";
      },
    },
    nextNodeDbrList: {
      immediate: true,
      deep: true,
      handler() {},
    },
  },
  mounted() {
    this.timeout = setTimeout(() => {
      if (this.beforeCreate) {
        this.beforeCreate(this.form);
      }
    }, 1000);
  },
  computed: {},
  methods: {
    getObjKey(array, object) {
      const obj = {};
      for (let index = 0; index < array.length; index++) {
        for (const key in object) {
          if (Object.hasOwnProperty.call(object, key)) {
            if (array[index] === key) {
              obj[key] = object[key];
            }
          }
        }
      }
      return obj;
    },
    optionFocus(str) {
      this.focusPrototype = str;
      this.modal = true;
    },
    optionInput(value) {
      this[this.focusPrototype] = value;
      if (this.focusPrototype == "opinion") {
        this.form.setFieldsValue({
          opinion: value,
        });
      } else {
        this.form.setFieldsValue({
          fthyj: value,
        });
      }

      this.modal = false;
    },
  },
  beforeDestroy() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/table.less";
td {
  text-align: left !important;
}
.title {
  min-width: 150 !important;
  text-align: right !important;
  background: rgb(241, 241, 241) !important;
}
.title::after{
  display: inline;
  content: "：";
}
.input {
  border: none;
}
.cnetent{
  padding: 0 !important;
}
</style>
